import React from 'react';
import './App.css';
import './Todo.css';

function App() {
  
  return (
    <div className="App">
        <ToDo/>
    </div>
  );
}

class ToDo extends React.Component{
   state = {
    list:[
      {
        id:1,
        name:"打游戏",
        check:true
      }
    ]
   }
   render(){
    return (
      <div className='TodoContainer'>
          <AddTodo list={this.state.list}/>
          <List list={this.state.list}/>
      </div>
    )
   }
}

class AddTodo extends React.Component{
  constructor(props){
    super(props)
    this.inputRef = React.createRef()
  }
  handleKeyDown = (val) =>{
    if(val.code === 'Enter'){
      this.props.list.push(this.inputRef.current.value)
    } 
  }
  render(){
    return(
      <div className='input-container'>
        <input ref={this.inputRef} onKeyDown={this.handleKeyDown} placeholder='请输入回车提交'/>
      </div>
    )
  }
}

class List extends React.Component{
  render(){
    const {list} = this.props
    return(
      <div>
        <ul>
        {list.map(item=>{
          return <li className={item.check? 'text-strike':''}  key={item.id}>
            <input type="checkbox" checked={item.check} onChange={(e)=>{this.check = e.target.checked;
            }}/>
            {item.name}
            </li>
        })}
        </ul>
      </div>
    )
  }
}

export default App;
